/**
* @description: 发起计划
* @author: yaochao
* @remark:
**/
<template>
	<view class="task-monitor">
		<nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack">
			<img slot="iconfont" v-if="currentTab === 'tab-2'" src="../../static/img/sx.png" alt=""
				@click="showSelectContent=true">
		</nav-bar>
		<view class="header-bar" :style="currentTab === 'tab-1' ? 'height: px2vh(150);border-radius: 0;':''">
			<!-- 切换tab -->
			<div class="get-state-tab">
				<div class="info-tab-item" :class="currentTab === 'tab-1' ? ' info-tab-current': ''"
					@click="tabChange('tab-1')">计划发起</div>
				<div class="info-tab-item" :class="currentTab === 'tab-2' ? ' info-tab-current': ''"
					@click="tabChange('tab-2')">我发起的</div>
			</div>

			<!--计划发起-->
			<view v-if="currentTab === 'tab-1'" class="mainwrap">
				<main>
					<van-form ref="ruleForm">
						<view class="commonbj">
							<van-field v-model="subParam.planName" name="planName" label="计划名称" placeholder="请输入"
								required input-align="right" error-message-align="right"
								:rules="[{ required: true,trigger:'onChange', message: '' }]" />
							<van-field v-model="subParam.planStartTime" required
								:rules="[{ required: true, trigger:'onSubmit'}]" input-align="right" clearable
								label="计划开始时间" placeholder="请选择" right-icon="arrow" readonly
								@click-right-icon="setSelectTime('startTime')" />
							<van-field v-model="subParam.planEndTime" required
								:rules="[{ required: true, trigger:'onSubmit'}]" input-align="right" clearable
								label="计划结束时间" placeholder="请选择" right-icon="arrow" readonly
								@click-right-icon="setSelectTime('endTime')" />
							<van-field input-align="right" readonly v-model="subParam.workDirectorName" label="作业负责人" />
							<!-- <van-field input-align="right" readonly v-model="subParam.workDirectorName" label="作业负责人"
								:rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择" right-icon="arrow"
								required @click-right-icon="handleSelectUser('mantle')"/> -->
							<van-field v-model="subParam.workTypeName" name="workType" input-align="right" readonly
								label="作业类型" :rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择"
								right-icon="arrow" required @click-right-icon="showSelectJobType = true" />
						</view>

						<view class="commonbj">
							<van-field input-align="right" readonly v-model="siteObj.siteName" label="作业地点"
								:rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择" right-icon="arrow"
								required @click-right-icon="showSelectSite = true" />
							<van-field v-model="subParam.workContentTypeName" input-align="right" readonly
								label="作业内容类型" :rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择"
								right-icon="arrow" required @click-right-icon="showSelectJobContentType = true" />
							<van-field input-align="right" readonly v-model="subParam.workContent" label="作业内容"
								:rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择" right-icon="arrow"
								required @click-right-icon="selectJobContentClick" />
						</view>

					</van-form>
					<!--时间选择器-->
					<!-- <van-calendar v-model="showDatetimePicker" color="#417ADC" @confirm="onDatetimeConfirm" /> -->
					<van-popup v-model="showDatetimePicker" position="bottom" style="width: 100%;">
						<van-datetime-picker v-model="currentDate" type="date" title="选择年月日"
							@confirm="onDatetimeConfirm" @cancel="showDatetimePicker = false" :min-date="minDate"/>
					</van-popup>
					<!--选择人员-->
					<van-popup v-model="showSelectUser" position="right">
						<selectUser :equIds="equIds" :selected.sync="staffList" @cancel="showSelectUser = false"
							:roleId="executiveRoleId" @comfirm="userComfirm" />
					</van-popup>
					<!--选择站点-->
					<van-popup v-model="showSelectSite" position="right">
						<select-site @cancel="siteCancel" @confirm="siteConfirm" :selected.sync="siteObj"
							:isInitiateTask="true" />
					</van-popup>
					<!--作业内容类型-->
					<van-popup v-model="showSelectJobContentType" position="bottom">
						<van-picker title="作业内容类型" show-toolbar :columns="JobContentTypeColumns" value-key="dictLabel"
							@confirm="onChangeJobContentType" @cancel="showSelectJobContentType = false" />
					</van-popup>
					<!--作业类型-->
					<van-popup v-model="showSelectJobType" position="bottom">
						<van-picker title="作业类型" show-toolbar :columns="JobTypeColumns" @confirm="onChangeJobType"
							value-key="dictLabel" @cancel="showSelectJobType = false" />
					</van-popup>
					<!--作业内容-->
					<van-popup v-model="showSelectJobContent" position="right">
						<select-equipment v-if="showSelectJobContent" :equObj="selectEqumentOption" @cancel="equCancel"
							:selected.sync="equKeys" @changeSelected="changeEquSelected($event)" />
					</van-popup>
				</main>
				<footer>
					<van-button block @click="submit">提交</van-button>
				</footer>
			</view>

			<!--我发起的-->
			<view v-else>
				<ul class="menu">
					<li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(item, index)">
						<view class="right-box">
							<text class="menu-num" :class="{selectmenu:index === current}">{{ item.value }}</text>
							<text class="menu-state" :class="{selectmenu:index === current}">{{ item.title }}</text>
						</view>
						<view :class="{sj:index === current}"></view>
					</li>
				</ul>

				<view class="patrol-search">
					<van-search disabled show-action v-model="searchValue" left-icon="" action-text="重置"
						right-icon="search" placeholder="请输入" @click="showSearch=true" @cancel="onSearch('')" />
				</view>
				<view class="task-main">
					<view class="task-list-container">
						<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
							<van-list v-if="progressList.length > 0" v-model="isLoading" :finished="finished"
								finished-text="没有更多了" @load="loadMore">
								<view class="task-list" v-for="(item,index) in progressList" :key="index"
									@click="jump(item)">
									<view class="task-top">
										<img src="../../static/img/light.png" alt="">
										<text class="equip-title">{{ item.planName }}</text>
										<text
											:class="item.planStateName === '已完成' ?'equip-state-wc' :'equip-state-other'">
											{{ item.planStateName }}
										</text>
									</view>
									<hr class="patrol-hr">
									<ul class="task-list-main">
										<li>
											<text class="task-title">计划时间：</text>
											<text
												class="task-titles">{{item.planStartTime + ' - ' + item.planEndTime}}</text>
										</li>
										<li style="display: flex;justify-content:space-between;">
											<div style="flex:1;">
												<text class="task-title">作业负责人：</text>
												<text class="task-titles">{{ item.workDirectorName }}</text>
											</div>
											<div style="flex:1;">
												<text class="task-title">作业内容类型：</text>
												<text class="task-titles">{{ item.workContentType }}</text>
											</div>
										</li>
										<li>
											<text class="task-title">作业站点：</text>
											<text class="task-titles">{{ item.workAdressName }}</text>
										</li>
									</ul>

								</view>

							</van-list>
							<van-empty v-else description="暂无数据" />
						</van-pull-refresh>
					</view>
				</view>

			</view>

		</view>

		<!--弹出搜索页-->
		<van-popup v-model="showSearch" position="right">
			<search-equ-match @cancel="showSearch = false;" @search="onSearch" />
		</van-popup>
		<!--我发起的 筛选弹窗-->
		<van-popup v-model="showSelectContent" position="right" :style="{width:'80%'}">
			<select-content :subParam="screenParam" @selectTimeClick="timeClick" @determine="selectContentDetermine"
				@selectContentClear="selectContentClear"></select-content>
		</van-popup>

		<!--弹出时间筛选弹窗使用-->
		<!-- <van-calendar v-model="showCalendar" type="multiple" color="#417ADC" @confirm="onSelectTimeConfirm" /> -->
		<van-popup v-model="showCalendar" position="bottom" style="width: 100%;">
			<van-datetime-picker @cancel="showCalendar = false" v-model="currentDate" type="date" title="选择年月日" @confirm="onSelectTimeConfirm" />
		</van-popup>
	</view>
</template>
<script>
	import navBar from '../../components/common/nav-bar.vue'
	import searchEquMatch from '../../pages/standardizedOperation/common/searchEquMatch'
	import moment from "moment/moment";
	import selectSite from "../../pages/standardizedOperation/common/selectSite";
	import selectEquipment from "../../pages/standardizedOperation/common/selectEquipment.vue";
	import selectUser from "../../pages/standardizedOperation/common/selectUser.vue"
	import selectContent from '../../pages/standardizedOperation/common/selectContent.vue'
	import {
		mapGetters
	} from "vuex";
	import {
		Toast,
		Dialog
	} from 'vant';
	export default {
		name: '',
		components: {
			navBar,
			searchEquMatch,
			selectUser,
			selectSite,
			selectEquipment,
			selectContent
		},
		props: {},
		data() {
			return {
				backgroundColor: '#417ADC',
				title: '我发起的',
				currentTab: 'tab-1',
				current: "", //我发起的 全部/未完成/已完成index
				tabCurrent: '',
				menuList: [{
						title: "全部",
						value: 0,
						state: '2',
						ZT: 0
					},
					{
						title: "未完成",
						value: 0,
						state: '0',
						ZT: 1
					},
					{
						title: "已完成",
						value: 0,
						state: '1',
						ZT: 2
					}
				],
				progressList: [], //我的任务列表数据
				planName: '',
				planTime: '',
				workDirectorId: '',
				typeName: '',
				showDatetimePicker: false,
				currentDate: new Date(),
				minDate: new Date(),
				showSearch: false,
				searchValue: '',
				refreshing: false, // 是否正在刷新
				isLoading: false,
				finished: false,
				total: 0, // 总条数
				page: 1,
				limit: 20,
				approvalTotal: 0,
				approvalPage: 1,
				showSelectUser: false, //人员选择
				equIds: [], //人员id
				executiveRoleId: "",
				staffList: {}, //选择人员数据
				showSelectSite: false, //选择站点
				siteObj: { //站点数据
					siteId: "",
					siteName: ""
				},
				showSelectJobType: false, //作业类型
				showSelectJobContentType: false, //作业内容类型
				JobTypeColumns: [], //作业类型数据
				JobContentTypeColumns: [], //作业内容类型数据
				showSelectJobContent: false, //作业内容
				jobContent: { //作业内容
					siteId: "",
					siteName: ""
				},
				selectEqumentOption: { // 选择设备组件需要的配置
					equType: "equipment",
					siteId: "", // 站点id（实际因为选择a站点和b站点，会存在两个siteid）
				},
				equKeys: {}, // 已选设备id列表
				myPlanParam: { //我发起的接口参数
					userId: "",
					workContentType: "",
					startTime: "",
					endTime: "",
					planState: 0,
					workAdressName: ""
				},
				subParam: {
					planName: "",
					workDirectorId: "",
					workDirectorName: "",
					workAdressId: "",
					workAdressName: "",
					workContentType: "",
					workContentTypeName: "",
					workContent: "",
					workContentId: "",
					workType: "",
					workTypeName: "",
					planStartTime: "",
					planEndTime: "",
				},
				showSelectContent: false, //筛选弹窗
				showCalendar: false, //时间弹窗
				screenParam: {
					planStartTime: "",
					planEndTime: "",
					radio: ""
				},
				timeSelectType: "" //筛选弹窗使用startTime，endTime

			}
		},
		computed: {
			...mapGetters(["userData"])
		},
		watch: {},
		onLoad() {
			this.dictionaryData()
		},
		onShow() {
			this.subParam.workDirectorId = this.userData.userId
			this.subParam.workDirectorName = this.userData.userName
		},
		methods: {
			goBack() {
				uni.navigateTo({
					url: '/pages/standardizedOperation/index'
				})
			},
			/**
			 * @param {Object} dictType
			 * 字典数据
			 */
			dictionaryData() {
				this.$apiRequest.bzhzyApi.getDictionaryTableData({
					dictType: "work_plan_type,work_plan_content_type"
				}).then(res => {
					//作业类型数据
					this.JobTypeColumns = res.data.work_plan_type
					//作业内容类型数据
					this.JobContentTypeColumns = res.data.work_plan_content_type

				})
			},
			// 提交-按钮
			async submit() {
				await this.$refs.ruleForm
					.validate()
					.then(() => {
						Dialog.confirm({
							message: '是否确认提交？',
							confirmButtonColor: '#417adc'
						}).then(() => {
							this.subParam.workAdressId = this.siteObj.siteId
							this.subParam.workAdressName = this.siteObj.siteName
							this.$apiRequest.bzhzyApi.initiatePlan(this.subParam).then(res => {
								this.clearParam()
								Toast(res.msg)
								this.goBack()
							}).catch(error => {
								Toast(error)
							})
						})

					})
					.catch((error) => {
						Toast('请完善内容')
					})
			},
			/**
			 * 清除数据
			 */
			clearParam() {
				this.subParam = {
					planName: "",
					workDirectorId: "",
					workDirectorName: "",
					workAdressId: "",
					workAdressName: "",
					workContentType: "",
					workContentTypeName: "",
					workContent: "",
					workContentId: "",
					workType: "",
					workTypeName: "",
					planStartTime: "",
					planEndTime: "",
				}
				this.siteObj = { //站点数据
					siteId: "",
					siteName: ""
				}
				this.equKeys = {} //设备id
				this.staffList = {} //人员数据
			},
			tabChange(currentTab) {
				this.current = 0
				this.currentTab = currentTab
				currentTab === 'tab-1' && (this.tabCurrent = '')
				if (currentTab === "tab-2") {
					this.onRefresh()
				} else {
					this.dictionaryData()
				}
				// this.onSearch('')
			},
			onSearch(searchValue) {
				this.searchValue = searchValue
				this.onRefresh()
				this.showSearch = false
			},
			loadMore() {
				if (this.total > this.progressList.length) {
					this.page = this.page + 1
					this.myPlanData()
				} else {
					this.finished = true
				}
			},
			/**
			 * 我发起的任务
			 */
			myPlanData() {
				//planState 0未完成 1已完成 全部=空
				// this.myPlanParam.planState = this.current ? this.current - 1 : ""
				// this.myPlanParam.workAdressName = this.searchValue
				// this.myPlanParam.userId = this.userData.userId
				this.myPlanParam = { //我发起的接口参数
						userId: this.userData.userId,
						workContentType: this.screenParam.radio,
						startTime: this.screenParam.planStartTime,
						endTime: this.screenParam.planEndTime,
						planState: this.current ? this.current - 1 : "",
						workAdressName: this.searchValue
					},
					this.$apiRequest.bzhzyApi.selectMyPlan(this.myPlanParam).then(res => {
						this.refreshing = false
						this.finished = true
						this.progressList = res.data.planList
						this.menuList.map(item => {
							if (item.title == "全部") {
								item.value = res.data.tatolAll
							}
							if (item.title == "未完成") {
								item.value = res.data.tatolIncomplete
							}
							if (item.title == "已完成") {
								item.value = res.data.tatolComplete
							}
						})
					}).catch(error => {
						this.refreshing = false
						this.finished = true
					})
			},
			/**
			 * 我发起的任务-跳转
			 * @param {Object} item
			 */
			jump(item) {
				uni.navigateTo({
					url: `/pages/standardizedOperation/assignmentDetails/assignmentDetails?id=${item.objId}&isMyInitiate=1`
				})
			},
			pickerFormatter(type, val) {
				if (type === "year") return val + "年";
				if (type === "month") return val + "月";
				if (type === "day") return val + "日";
				if (type === "hour") return val + "时";
				if (type === "minute") return val + "分";
			},
			/**
			 * 计划开始时间-计划结束时间
			 */
			setSelectTime(type) {
				this.showDatetimePicker = true
				this.timeSelectType = type
			},
			onDatetimeConfirm(date) {
				this.showDatetimePicker = false;
				if (this.timeSelectType === 'startTime') {
					this.subParam.planStartTime = this.formatDate(date)
				} else {
					this.subParam.planEndTime = this.formatDate(date)
				}
				if (this.subParam.planEndTime && this.getTime(this.subParam.planEndTime) < this.getTime(this.subParam
						.planStartTime)) {
					this.subParam.planEndTime = ''
					Toast('计划结束时间不能早于计划开始时间')
				}

				// if (date.length > 1) {
				// 	const [start, end] = date;
				// 	this.subParam.planStartTime = this.formatDate(start)
				// 	this.subParam.planEndTime = this.formatDate(end)
				// 	this.subParam.planTime = `${this.formatDate(start)} - ${this.formatDate(end)}`;
				// } else {
				// 	const [start] = date;
				// 	this.showDatetimePicker = false;
				// 	this.subParam.planStartTime = this.formatDate(start)
				// 	this.subParam.planEndTime = this.formatDate(start)
				// 	this.subParam.planTime = this.formatDate(start);
				// }
			},
			formatDate(date) {
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
			},
			getTime(time) {
				let date = new Date(time)
				return date.getTime()
			},
			onRefresh() {
				this.refreshing = true
				this.finished = false
				this.page = 1
				this.progressList = []
				this.myPlanData()
			},
			onSearch(searchValue) {
				this.searchValue = searchValue
				this.onRefresh()
				this.showSearch = false
			},
			/**
			 * 作业内容选择
			 */
			selectJobContentClick() {
				if (this.siteObj.siteName && this.subParam.workContentTypeName) {
					this.showSelectJobContent = true
				} else {
					Toast.fail("请先选择作业地点/作业内容类型")
				}

			},
			/**
			 * 工作负责人选择
			 */
			userComfirm() {
				this.showSelectUser = false
				this.subParam.workDirectorName = this.staffList.text
				this.subParam.workDirectorId = this.staffList.ids.join()
			},
			handleSelectUser(t) {
				this.showSelectUser = true
				// this.staffType = t
				// if (this.staffType == 'mantle') {
				// 	// 作业负责人id
				// 	this.staffList = {
				// 		ids: !this.mantleName ? [] : this.mantleUid,
				// 		text: this.mantleName
				// 	}
				// } else if (this.staffType == 'guardian') {
				// 	// 作业监护人
				// 	this.staffList = {
				// 		ids: !this.guardianName ? [] : this.guardianUid,
				// 		text: this.guardianName
				// 	}
				// } else {
				// 	// 班组成员
				// 	this.staffList = {
				// 		ids: !this.memberName ? [] : this.memberUid,
				// 		text: this.memberName
				// 	}
				// }
			},
			/**
			 *作业内容类型
			 */
			onChangeJobContentType(value, index) {
				this.subParam.workContentTypeName = value.dictLabel
				this.subParam.workContentType = value.dictValue
				// if (value.dictLabel === "通信光缆") {
				// 	this.selectEqumentOption.equType = "A_RESOBJID"
				// } else if (value.dictLabel === "通信设备") {
				// 	this.selectEqumentOption.equType = "equipment"
				// } else if (value.dictLabel === "通信电源") {
				// 	this.selectEqumentOption.equType = "powerSupply"
				// }				
				if (value.dictValue === "1") {
					//光缆设备
					this.selectEqumentOption.equType = "A_RESOBJID"
				} else if (value.dictValue === "2") {
					//通信设备"
					this.selectEqumentOption.equType = "equipment"
				} else if (value.dictValue === "3") {
					//电源设备
					this.selectEqumentOption.equType = "powerSupply"
				}
				console.log("s.selectEqumentOption", this.selectEqumentOption)
				this.showSelectJobContentType = false
				this.clearWorkContent()
			},
			/**
			 *作业类型
			 */
			onChangeJobType(value, index) {
				this.subParam.workTypeName = value.dictLabel
				this.subParam.workType = value.dictValue
				this.showSelectJobType = false
			},
			// 选择设备
			changeEquSelected(value) {
				this.showSelectEquipment = false;
				this.equKeys = value;
				this.subParam.workContent = this.equKeys.NAME
				this.subParam.workContentId = this.equKeys.ORGID
			},

			// 取消设备选择
			equCancel() {
				this.showSelectJobContent = false;
			},
			/**
			 * 站点关闭
			 */
			siteCancel() {
				this.showSelectSite = false
			},
			/**
			 * 站点选择
			 */
			siteConfirm() {
				this.showSelectSite = false
				this.selectEqumentOption.siteId = this.siteObj.siteId
				this.clearWorkContent()
			},
			/**
			 * 切换作业地点/作业内容类型，重置作业内容数据
			 */
			clearWorkContent() {
				this.equKeys = {};
				this.subParam.workContent = ""
				this.subParam.workContentId = ""
			},
			/**
			 * @param {Object} item
			 * @param {Object} index
			 * 全部/未完成/已完成切换
			 */
			chooseMenu(item, index) {
				//String()防止0=false
				this.current = String(item.ZT) ? item.ZT : '';
				this.onRefresh()
			},
			update(data) {
				console.log(data)
			},
			/**
			 * 时间弹窗
			 */
			timeClick(type) {
				this.showCalendar = true
				this.timeSelectType = type
			},
			/**
			 * 筛选条件确认
			 */
			selectContentDetermine() {
				this.showSelectContent = false
				this.onRefresh()
			},
			/**
			 * 筛选条件重置
			 */
			selectContentClear() {
				this.screenParam = {
					planStartTime: "",
					planEndTime: "",
					radio: ""
				}
			},
			/**
			 * 时间弹窗确认
			 * @param {Object} date
			 */
			onSelectTimeConfirm(date) {
				this.showCalendar = false;
				if (this.timeSelectType === 'startTime') {
					this.screenParam.planStartTime = this.formatDate(date)
				} else {
					this.screenParam.planEndTime = this.formatDate(date)
				}
				if (this.screenParam.planEndTime && this.getTime(this.screenParam.planEndTime) < this.getTime(this
						.screenParam.planStartTime)) {
					this.screenParam.planEndTime = ''
					Toast('计划结束时间不能早于计划开始时间')
				}
				// if (date.length > 1) {
				// 	const [start, end] = date;
				// 	this.showCalendar = false;
				// 	this.subParam.planStartTime = this.formatDate(start)
				// 	this.subParam.planEndTime = this.formatDate(end)
				// } else {
				// 	const [start] = date;
				// 	this.showCalendar = false;
				// 	this.subParam.planStartTime = this.formatDate(start)
				// 	// this.subParam.planEndTime = this.formatDate(start)
				// }
			},
		},

	}
</script>
<style scoped lang="scss">
	.task-monitor {
		width: 100vw;
		height: 100vh;
		background: #f2f6fa;
		overflow: hidden;

		.header {
			img {
				width: px2vw(48);
				margin-right: px2vw(40);
			}
		}

		.header-bar {
			height: px2vh(250);
			border-radius: 0 0 px2vh(40) px2vh(40);
			background: #417adc;
			margin-bottom: px2vh(140);

			//display: flex;
			//justify-content: center;
			.get-state-tab {
				width: px2vw(1020);
				height: px2vh(120);
				margin: 0 auto px2vh(30);
				border-radius: px2vw(20);
				box-sizing: border-box;
				// margin: px2vh(40) px2vw(30) px2vh(37);
				background-color: rgba(255, 255, 255, 0.4);
				display: flex;
				justify-content: center;
				align-items: center;
				border: px2vw(2) solid rgba(198, 215, 245, 1);

				.info-tab-item {
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: rgba(255, 255, 255, 1);
					font-weight: bold;
					font-size: px2vw(38);

					&.info-tab-current {
						height: px2vh(100);
						margin: 0 px2vw(10);
						margin-right: px2vw(10);
						border-radius: px2vw(20);
						background-color: rgba(255, 255, 255, 0.7);
						color: rgba(65, 122, 220, 1);
						font-weight: Bold;
					}
				}
			}

			.menu {
				width: px2vw(1020);
				height: px2vh(180);
				border: 1px solid #ffffff;
				border-radius: 10px;
				box-shadow: 0 0 18px 2px #fff inset;
				//background-image: url('../../../../static/img/borderR.png');
				background-color: rgba(243, 247, 255, 0.95);
				//background-size: px2vw(1020) px2vh(220);
				margin: 0 auto;
				display: flex;
				justify-content: space-evenly;
				align-items: center;

				li {
					position: relative;
					height: 100%;
					display: flex;
					align-items: center;

					.right-box {
						text-align: center;

						.menu-num {
							display: block;
							font-size: px2vw(54);
							font-weight: bold;
							color: #333;
						}

						.menu-state {
							font-size: px2vw(36);
							color: #333;
						}

						.selectmenu {
							color: #417adc;
						}
					}

					.sj {
						width: px2vw(78);
						height: px2vh(66);
						position: absolute;
						bottom: 0;
						//right: px2vw(40);
						left: 50%;
						transform: translate(-50%, 78%);
						background-image: url('../../static/img/sj.png');
						background-size: px2vw(78) px2vh(66);
					}
				}
			}
		}

		.patrol-search {
			width: px2vw(1020);
			height: 38px;
			margin: px2vw(20) px2vw(30);

			.van-search {
				padding: 0 0;
				height: 38px;
			}

			.van-search__content {
				background: #fff;
				height: 38px;
			}

			/deep/.van-field__control {
				height: 30px;
			}
		}

		.task-main {
			height: calc(100vh - #{px2vh(583)} - 38px);
			overflow: auto;
			position: relative;

			.task-list {
				width: px2vw(1020);
				padding-bottom: px2vh(30);
				//min-height: px2vh(416);
				//padding-bottom: px2vh(20);
				background: #fff;
				border-radius: px2vw(20) px2vh(20);
				margin-top: px2vh(30);
				margin-left: px2vw(30);
				margin-bottom: px2vh(30);

				.task-top {
					width: calc(100% - #{px2vw(80)});
					margin-left: px2vw(40);
					height: px2vh(140);

					img {
						width: px2vw(64);
						height: px2vw(64);
						margin-top: px2vh(40);
						float: left;
					}

					.equip-title {
						color: #333;
						font-size: px2vw(48);
						width: px2vw(670);
						height: px2vh(48);
						line-height: px2vh(48);
						float: left;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: px2vh(48);
						margin-left: px2vw(25);
					}

					.equip-state-wc,
					.equip-state-wzx,
					.equip-state-zxz,
					.equip-state-other,
					.equip-state-cx {
						display: flex;
						justify-content: center;
						align-items: center;
						width: px2vw(150);
						height: px2vh(50);
						font-size: px2vw(32);
						border-radius: px2vw(10);
						margin-top: px2vh(48);
						margin-left: px2vw(27);
						float: left;
						//text-align:center;
					}

					// 已完工/审批通过
					.equip-state-wc {
						color: #3cda68;
						background: rgba(60, 218, 104, 0.1);
					}

					// 未执行/待审批
					.equip-state-wzx {
						color: #ff7070;
						background: rgba(255, 112, 112, 0.1);
					}

					// 执行中/审批拒绝
					.equip-state-zxz {
						color: #ffad0e;
						background: rgba(255, 180, 0, 0.1);
					}

					.equip-state-other {
						color: #417ADC;
						background: rgba(65, 122, 220, 0.1);
					}

					// 已作废/已撤销
					.equip-state-cx {
						color: #999;
						background: #eee;
					}
				}

				.patrol-hr {
					width: px2vw(940);
					border: px2vh(1) solid #e5e5e5;
					margin-left: px2vw(40);
				}
			}

			.task-list-main {
				width: px2vw(940);
				//height: px2vh(266);
				margin-left: px2vw(40);
				padding-bottom: px2vh(30);

				li {
					margin-top: px2vh(30);
					font-size: px2vw(36);

					.task-title {
						color: #666;
					}

					.task-titles {
						color: #333;
					}
				}
			}

			.task-hr {
				width: px2vw(940);
				border: 0;
				border-bottom: px2vh(6) dashed #e5e5e5;
				margin-top: px2vh(14);
				margin-left: px2vw(40);
			}

			.by {
				position: absolute;
				width: px2vw(40);
				height: px2vh(40);
				border-radius: px2vw(100);
				left: px2vw(12);
				float: left;
				background: #f2f6fa;
			}

			.byr {
				position: absolute;
				width: px2vw(40);
				height: px2vh(40);
				border-radius: px2vw(100);
				right: px2vw(12);
				float: right;
				background: #f2f6fa;
			}

			.bottom-patrol {
				width: px2vw(940);
				height: px2vh(54);
				margin-left: px2vw(40);
				margin-top: px2vh(26);
				font-size: px2vw(32);

				.left-bottom-patrol {
					display: flex;
					justify-content: center;
					align-items: center;
					min-width: px2vw(300);
					padding: 2px 4px;
					//height: px2vh(54);
					background: #ecf1fb;
					float: left;
					text-align: center;
					color: #417adc;
					border-radius: px2vw(8);
				}

				.right-bottom-patrol {
					width: px2vw(120);
					height: px2vh(54);
					float: right;

					.patrol-btn {
						width: px2vw(120);
						height: px2vh(54);
						background: #417adc;
						float: right;
						//border-radius: px2vw(20);
					}

					/deep/.van-button--normal {
						padding: 0;
					}
				}
			}
		}
	}

	.mainwrap {
		height: calc(100vh - px2vw(383));
	}

	main {
		width: calc(100% - #{px2vw(60)});
		margin-left: px2vw(30);
		height: calc(100vh - #{px2vh(590)});
		overflow-x: auto;

		.commonbj {
			background-color: #fff;
			margin-bottom: px2vh(30);

			.custom-title {
				display: flex;
				align-items: center;

				img {
					width: px2vh(42);
					margin-right: px2vw(29);
				}
			}
		}

		.commontitle {
			font-size: px2vh(40);
			color: #666666;
			font-weight: bold;
			margin-top: px2vh(60);
			margin-bottom: px2vh(27);

			.addoption {
				float: right;
				height: px2vh(46);
				margin-top: px2vh(10);
				margin-right: px2vw(50);
			}
		}

		.isrequired::before {
			content: '*';
			color: #ff4355;
			display: inline-block;
		}

		.remark-info-container {
			padding: px2vh(70) px2vw(50);
			font-size: px2vw(42);
			color: #666666;
			border-radius: px2vw(20);
			overflow: hidden;
			background-color: #ffffff;
			margin-top: px2vh(40);
			margin-bottom: px2vh(40);

			.remark-wrap {
				border-radius: px2vw(20);

				.remark-text {
					height: px2vh(150);
				}
			}
		}
	}

	footer {
		height: px2vh(155);
		background: #f2f6fa;
		padding-top: px2vh(45);

		/deep/ .van-button {
			width: calc(100% - #{px2vw(60)});
			margin-left: px2vh(30);
			height: px2vh(120);
			color: #fff;
			background-color: #417adc;
			border: 1px solid #417adc;
			border-radius: px2vh(60);
		}
	}
</style>
